var fullScreen = false;
var charts = new Array();
var sources;
var combinedGraph = new Array();

function changeCategories(city) {
    $.getJSON("assets/php/functions.php",
        {
            f: "getCategories",
            city: city
        }, function(data)
        {
            if(data.length > 0)
            {
                $("ul.categories").empty();
                for(var x = 0; x < data.length; x++)
                {
                    var shortTitle = data[x].short_title;
                    var lowerShortTitle = shortTitle.toLowerCase();

                    $("ul.categories").append('<li id="cat-'+data[x].catid+'"><div class="category icon-'+data[x].class+'" data-category="'+data[x].short_title+'" data-icon="icon-'+data[x].class+'" data-category-type="'+data[x].type+'"></div></div><div class="short-title">'+data[x].short_title+'</div></li>');
                    $("ul.categories li:eq('"+x+"')").fadeIn(100);
                }

                //Hover state for the category icons
                $('ul.categories li').hover(
                    function() {
                        $(this).addClass('hover');
                    },
                    function() {
                        $(this).removeClass('hover');
                    }
                );

                //Make the categories icons draggable
                $(function() {
                    $('.category').draggable({
                        revert: true,
                        cursor: 'move',
                        scoll: false,
                        appendTo: 'body',
                        containment: 'window',
                        helper: 'clone'
                    });
                });
            }
        });

    //If there's a list item with the selected class remove it
    $('li.city-flag').removeClass('selected');
    //Give the current selected city the class of selected
    $('.city-flags #'+city).addClass('selected');

}

function loadCategoryInformation(category, city)
{
    if(city == "")
    {
        city = "none";
    }

    $.getJSON("assets/php/functions.php",
    {
        f: "getSources",
        city: city,
        category: category
    }, function(data)
    {
        return data;
    });
}

$(document).ready(function()
{
    $.getJSON("assets/php/functions.php",
    {
        f: "getSources",
        city: 'all',
        category: 'all'
    }, function(data)
    {
        if(data[0] == 'succes')
        {
            sources = data;
        }
        else
        {
            sources = new Array();
        }
    });
});

function loadGraph(category, city, element, icon, type)
{
    if(type == "map")
    {
        $.getJSON("assets/php/functions.php",
            {
                f: "getValues",
                city: city,
                category: category
            }, function(data)
            {
                if(data != "no results")
                {
                    charts.push(new Array(data.title, "", city, category));
                    $("#"+element).append('<iframe src="'+data.series+'" frameborder="0" class="iframe-data"></iframe>');

                    //Close button
                    var elementParent = $('#'+element).parent();
                    $(elementParent).children('.graph-info').children('.category-city').text(data.title);
                    $(elementParent).children('.graph-info').children('.close-graph-btn').show();
                    $(elementParent).children('.graph-info').children('#chosen-category-icon').addClass(icon);

                    //Append source information
                    if(sources[0] == 'succes')
                    {
                        $(elementParent).children('.graph-info').children('.more-info-graph-btn').show();
                        content = '';

                        var sourceFound = false;
                        for(var x = 0; x < sources[1].sources.length; x++)
                        {
                            current = sources[1].sources[x];
                            if(current.category == category && current.city == city)
                            {
                                sourceFound = true;
                                content = '<a class="source-link" href="'+current.link+'">'+ current.link_text +'</a>'+ '<div class="source-description">'+current.description+'</div>';
                            }
                        }

                        if(sourceFound == false)
                        {
                            content = 'Er is geen bron gevonden.';
                        }

                        $(elementParent).children('.graph-info').children('.more-info-graph-btn').attr('data-content', content);
                    }

                    //Add attributes
                    $("#"+element).attr("data-graph", data.title);
                    $("#"+element).attr("data-category", category);
                    $("#"+element).attr("data-city", city);

                    //Check the amount of graphs, and then check if they can combine into 1
                    if(charts.length > 1)
                    {
                        for(var x = 0; x < charts.length; x++)
                        {
                            for(var y = 0; y < charts.length; y++)
                            {
                                if(y != x && (charts[x][2] != charts[y][2] && charts[x][3] == charts[y][3]))
                                {
                                    //Code to check for combined graphs
                                }
                            }
                        }
                    }
                }
            });
    }
    else
    {
        $.getJSON("assets/php/functions.php",
            {
                f: "getValues",
                city: city,
                category: category
            }, function(data)
            {
                if(data == "no results")
                {
                    alert('An error has occurred.');
                }
                else
                {
                    var categories = new Array();

                    for(var x = 0; x < data.categories.length; x++)
                    {
                        categories.push(data.categories[x]);
                    }

                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: element,
                            type: data.type
                        },
                        title: {
                            text: data.title
                        },
                        xAxis: {
                            categories: categories
                        },
                        yAxis:
                        {
                            title:
                            {
                                text: data.subtitle
                            }
                        },
                        series: data.series
                    });
                    charts.push(new Array(data.title, chart, city, category));

                    //Close button
                    var elementParent = $('#'+element).parent();
                    $(elementParent).children('.graph-info').children('.category-city').text(data.title);
                    $(elementParent).children('.graph-info').children('.close-graph-btn').show();
                    $(elementParent).children('.graph-info').children('#chosen-category-icon').addClass(icon);

                    //Append source information
                    if(sources[0] == 'succes')
                    {
                        content = '';
                        $(elementParent).children('.graph-info').children('.more-info-graph-btn').show();

                        for(var x = 0; x < sources[1].sources.length; x++)
                        {
                            current = sources[1].sources[x];
                            if(current.category == category && current.city == city)
                            {
                                content = '<a class="source-link" href="'+current.link+'">'+ current.link_text +'</a>'+ '<div class="source-description">'+current.description+'</div>';
                            }
                        }

                        $(elementParent).children('.graph-info').children('.more-info-graph-btn').attr('data-content', content);
                    }

                    //Add attributes
                    $("#"+element).attr("data-graph", data.title);
                    $("#"+element).attr("data-category", category);
                    $("#"+element).attr("data-city", city);

                    //Check the amount of graphs, and then check if they can combine into 1
                    if(charts.length > 1)
                    {
                        for(var x = 0; x < charts.length; x++)
                        {
                            for(var y = 0; y < charts.length; y++)
                            {
                                if(y != x && (charts[x][2] != charts[y][2] && charts[x][3] == charts[y][3]))
                                {
                                    //Code to check for combined graphs
                                }
                            }
                        }
                    }
                }

            });
    }
}

function goFullScreen()
{
    if (screenfull.enabled)
    {
        if(fullScreen == false)
        {
            fullScreen = true;
            $("#layout-fullscreen-background").show();
        }
        else
        {
            fullScreen = false;
            $("#layout-fullscreen-background").hide();
        }
        screenfull.toggle();
    }
    else
    {
        alert("Fullscreen is not enabled");
    }
}

$("#layout-fullscreen-button").on('click', function() {
    goFullScreen();
});

//Resize the graphs after newly selecting
$(".display-options-ul li").on('click', function() {

    setTimeout(function(){
        for(var x = 0; x < charts.length; x++) {
           var chart = charts[x][1];
           var containerWidth = parseInt($(".graphs:eq(0)").css("width")) - 30;
           var containerHeight = parseInt($(".graphs:eq(0)").css("height")) - 30;
           chart.setSize(containerWidth, containerHeight);
        }
    },50);
});

$(".close-graph-btn").live('click', function()
{
    var parentElement = $(this).parent().siblings('.graph-drawzone');
    $(".highcharts-container", parentElement).fadeOut(300).remove();
    $(".iframe-data", parentElement).fadeOut(300).empty();
    var selectedGraph = $(parentElement).attr("data-graph");

    for(var x = 0; x < charts.length; x++)
    {
        if(charts[x][0] == selectedGraph)
        {
            charts.splice(x, 1);
        }
    }

    $(parentElement).removeAttr("data-graph");
    $(parentElement).removeAttr("data-city");
    $(parentElement).removeAttr("data-category");


    $(this).hide();
    $(this).siblings('.more-info-graph-btn').hide();
    $(this).siblings('.category-city').text('');
    $(this).siblings('#chosen-category-icon').removeClass();
    $(this).siblings('.more-info-graph-btn').popover('hide');

});